<link href="/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<link href="/themes/default/css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/third-party/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/umeditor.min.js"></script>
<script type="text/javascript" src="/lang/zh-cn/zh-cn.js"></script>

<input type="hidden" name="org.id" value="${org.id!''}">
<input type="hidden" id="orgContent" name="org.content">
<input type="hidden" id="changeLogo" name="changeLogo" value="false">
<table class="insert-tab" width="100%">
  <tbody>
  <tr>
    <th><i class="require-red">*</i>会员单位类型：</th>
    <td>
      <select name="org.type">
      <%for(option in @orgTypeCache.getOptionList()) {%>
        <%if(has(org) && org.type == option.value) {%>
          <option value="${option.value}" selected>${option.name}</option>
        <%} else {%>
          <option value="${option.value}">${option.name}</option>
        <%}%>
      <%}%>
      </select>
    </td>
  </tr>
  <tr>
    <th><i class="require-red">*</i>会员单位名称：</th>
    <td><input class="common-text required" name="org.name" size="50" value="${org.name!''}" type="text"></td>
  </tr>
  <tr>
    <th><i class="require-red">*</i>标识图片：</th>
    <td>
      <%if(has(org)) {%>
        <img style="max-width: 100px; max-height: 100px;" src="/upload/logo/${org.logo}"><br>
        <input type="checkbox" id="doChangeLogo">修改图片<br>
      <%}%>
      <input type="file" id="logo" name="logo" onchange="previewImage(this)">&nbsp;
      <!-- 上传图预览 -->
      <div id="preview">
        <img id="imghead" width="100" height="100" border=0 src='/images/nologo.png'>
      </div>
    </td>
    </td>
  </tr>
  <tr>
    <th><i class="require-red">*</i>会员单位简介：</th>
    <td>
      <script type="text/plain" id="content" style="width:95%;height:300px;">${org.content!''}</script>
    </td>
  </tr>
  <tr>
    <th></th>
    <td>
      <input type="button" class="btn btn-primary btn6 mr10" value="提交" onclick="submitForm();">
      <input class="btn btn6" onclick="history.go(-1)" value="返回" type="button">
    </td>
  </tr>
  </tbody>
</table>

<style type="text/css">
  #preview{width:100px;height:100px;overflow:hidden;}
  #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>

<script type="text/javascript">
  //实例化编辑器
  var um = UM.getEditor('content');

  function submitForm() {
    var content = UM.getEditor('content').getContent();
    document.forms[0].orgContent.value = content;
    if($("#doChangeLogo").is(":checked")) {
      $("#changeLogo").val("true");
    } else {
      $("#changeLogo").val("false");
    }
    //alert($("#changeLogo").val());
    document.forms[0].submit();
  }

  //图片上传预览    IE是用了滤镜。
  function previewImage(file) {
    var MAXWIDTH = 100;
    var MAXHEIGHT = 100;
    var div = document.getElementById('preview');
    if (file.files && file.files[0]) {
      div.innerHTML = '<img id=imghead>';
      var img = document.getElementById('imghead');
      img.onload = function () {
        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
        img.width = rect.width;
        img.height = rect.height;
//                 img.style.marginLeft = rect.left+'px';
        img.style.marginTop = rect.top + 'px';
      }
      var reader = new FileReader();
      reader.onload = function (evt) {
        img.src = evt.target.result;
      }
      reader.readAsDataURL(file.files[0]);
    }
    else //兼容IE
    {
      var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
      file.select();
      var src = document.selection.createRange().text;
      div.innerHTML = '<img id=imghead>';
      var img = document.getElementById('imghead');
      img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
      var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
      status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
      div.innerHTML = "<div style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
    }
  }
  function clacImgZoomParam(maxWidth, maxHeight, width, height) {
    var param = {top: 0, left: 0, width: width, height: height};
    if (width > maxWidth || height > maxHeight) {
      rateWidth = width / maxWidth;
      rateHeight = height / maxHeight;

      if (rateWidth > rateHeight) {
        param.width = maxWidth;
        param.height = Math.round(height / rateWidth);
      } else {
        param.width = Math.round(width / rateHeight);
        param.height = maxHeight;
      }
    }

    param.left = Math.round((maxWidth - param.width) / 2);
    param.top = Math.round((maxHeight - param.height) / 2);
    return param;
  }
</script>